let layer = layui.layer
function initCate() {
  $.ajax({
    method: 'GET',
    url: '/my/article/cates',
    success: function (res) {
      if (res.status !== 0) {
        return layer.msg('初始化文章分类失败！')
      }
      // 调用模板引擎，渲染分类的下拉菜单
      var htmlStr = template('tpl-cate', res)
      $('#cate').html(htmlStr)
      // 一定要记得调用 form.render() 方法
      //   form.render()
      layui.form.render()
    }
  })
}

initCate()

// 初始化富文本编辑器
initEditor()

// 1. 获取图片
var $image = $('#image')

// 2. 裁剪选项
var options = {
  viewMode: 3,
  aspectRatio: 400 / 280,
  preview: '.img-preview'
}

// 3. 初始化裁剪区域
$image.cropper(options)

$('#btnChooseImage').on('click', function () {
  $('#file').click()
})

$('#file').on('change', function () {
  // 获取文件列表
  let fileList = $(this)[0].files
  console.log(fileList)
  if (fileList.length === 0) return layui.msg('请选择图片')
  // 根据选择的图片创建url地址
  let file = URL.createObjectURL(fileList[0])
  $image
    .cropper('destroy') // 销毁旧的裁剪区域
    .attr('src', file) // 重新设置图片路径
    .cropper(options) // 重新初始化裁剪区域
})

let art_state = '已发布'

$('#btnSave').click(function () {
  art_state = '草稿'
})

$(function () {
  // 给表单注册submit事件
  $('#form').on('submit', function (e) {
    // 阻止默认行为
    e.preventDefault()
    // 创建 FormData对象
    let fd = new FormData(this)
    // 把state追加到fd对象里面
    fd.append('state', art_state)

    // 缺少图片 二进制数据
    $image
      .cropper('getCroppedCanvas', {
        // 创建一个 Canvas 画布
        width: 400,
        height: 280
      })
      .toBlob(function (blob) {
        // 将blob形参追加到 fd对象
        fd.append('cover_img', blob)
        // 发送ajax请求将数据提交给服务器端
        // 通过ajax来提交 fd数据
        $.ajax({
          type: 'post',
          url: '/my/article/add',
          data: fd,
          processData: false,
          contentType: false,
          success: (res) => {
            if (res.status !== 0) return layui.layer.msg('发布文章失败')
            // 成功我们就需要跳转到 文章列表页面 应该让文章列表页面高亮显示
            // location.href = '/article/art_list.html'
            // 思路：触发父页面 文章列表 点击事件就可以了
            // .click()
            // console.log()
            window.parent.document.querySelector('#list').click()
          }
        })
      })
  })
})
